<template>
	<div class="collect-main">
		<!-- <div class="title-list">
			<div class="title-item">云贷</div>
			<div class ="title-item">达分期</div>
			<div class="title-item">商城</div>
			<div class="title-item">财务</div>
			<div class="title-item">审信</div>
		</div> -->
		<div v-if="collectData && collectData.length > 0" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
			<section class="section-item collect-item" v-for="item in collectData">
				<div class="title">{{item.title}} <a href="javascript:;" class="icon icon-shoucang1 fr" @click="cancelCollect(item.themeCode, item.router)"></a></div>
				<div class="collect-title">
					{{item.conditName.split('_')[0]}}
					<span class="time">{{item.conditName.split('_')[1]}}</span>
				</div>
				<div class="con" v-if="item.con">
					<div class="collect-con" v-if="item.router == '/loans/achievement'">
						<div class="con-item">
							<p class="num">{{numFormat(item.con.creditAmount)}}</p>
							<p class="name">新增授信</p>
						</div>
						<div class="con-item">
							<p class="num">{{numFormat(item.con.loanStorage)}}</p>
							<p class="name">在库净增</p>
						</div>
					</div>
					<div class="collect-con" v-if="item.router == '/loans/actual'">
						<dy-up :opt="item.list" :isClick="false"></dy-up>
					</div>
					<div class="collect-con" v-if="item.router == '/loans/credit'">
						<div class="con-item">
							<p class="num">{{numFormat(item.con.creditNew)}}</p>
							<p class="name">新增授信</p>
						</div>
						<div class="con-item">
							<p class="num">{{numFormat(item.con.creditAmountAvg)}}</p>
							<p class="name">客户数人均授信</p>
						</div>
						<div class="con-item">
							<p class="num">{{numFormat(item.con.passRatio)}}</p>
							<p class="name">通过率</p>
						</div>
					</div>
					<div class="collect-con" v-if="item.router == '/loans/storage'">
						<div class="con-item">
							<p class="num">{{numFormat(item.con.loanStorage)}}</p>
							<p class="name">{{item.conditName.match('历史') ? '借款在库' : '在库净增'}}</p>
						</div>
						<div class="con-item">
							<p class="num">{{numFormat(item.con.repayCapital)}}</p>
							<p class="name">还款本金</p>
						</div>
						<div class="con-item">
							<p class="num">{{numFormat(item.con.loanAmount)}}</p>
							<p class="name">借款金额</p>
						</div>
					</div>
					<div class="collect-con" v-if="item.router == '/loans/afterloan'">
						<div class="con-item">
							<p class="num">{{numFormat(item.con.repay90Ratio)}}</p>
							<p class="name">90天整体回款率</p>
						</div>
						<div class="con-item">
							<p class="num">{{numFormat(item.con.repay180Ratio)}}</p>
							<p class="name">180天整体回款率</p>
						</div>
						<div class="con-item">
							<p class="num">{{numFormat(item.con.overdueRatio)}}</p>
							<p class="name">逾期率</p>
						</div>
					</div>
					<div class="collect-con" v-if="item.router == '/loans/hr'">
						<div class="con-item">
							<p class="num">{{numFormat(item.con.onRollCount)}}</p>
							<p class="name">在册人力</p>
						</div>
						<div class="con-item">
							<p class="num">{{numFormat(item.con.onRollCount)}}</p>
							<p class="name">业务人力</p>
						</div>
						<div class="con-item">
							<p class="num">{{numFormat(item.con.busiDimissionCount)}}</p>
							<p class="name">业务人力离职率</p>
						</div>
					</div>
				</div>
				<div class="collect-footer cc" v-if="item.con">
					<div class="date-time fl">截止时间：{{item.con.expiryDate ? item.con.expiryDate : item.con.createTime}}</div>
					<a class="fr" href="javascript:;" @click="detail(item.router, item.condit, item.conditName)">查看详细 &gt;&gt;</a>
				</div>
			</section>
		</div>
		<section v-else>
			<i class="icon icon-icon_wushoucang"></i>
			<p class="no-tip">暂时未收藏任何东西哦~</p>
		</section>
	</div>
</template>
<script>
import {numFormat} from '@/utils/index'
export default {
	name: 'collect',
	data () {
		return {
			numFormat: numFormat,
			collectPost: {
				themeCode: 1,
				pageBean: {
					"pageIndex": 1,
					"pageSize": 4
				}
			},
			collectData: [],
			index: 0,
			loading : false,
			count: 1,
			pageCount: 1,
		}
	},
	beforeMount() {
		let _this = this;
      	if(typeof cordova != "undefined") {//监听原生进入收藏页面
      		cordova.exec(function(){
	            //刷新数据
	            _this.collectData = []
	            _this.index = 0
	            _this.pageCount = 1
	            _this.collectPost = {
	            	themeCode: 1,
	            	pageBean: {
	            		"pageIndex": 1,
	            		"pageSize": 4
	            	}
            	}
            	_this.loadMore()
        	}, null, "commonPlugin", "goToCollectionPage", []);
      	} 
   		this.loadMore()
	},
	methods: {
		// 加载更多
		loadMore () {
			this.loading = true
    		// 分页
    		if(this.collectPost.pageBean.pageIndex <= this.pageCount) {
    			api.findListByPage(this.collectPost).then(data => {
    				this.collectData = this.collectData.concat(data.list)
    				this.count = data.list.length
    				this.pageCount = data.pageCount
    				if(data.list.length > 0) {
    					this.collectPost.pageBean.pageIndex += 1
    					this.getContent(this.collectData[this.index].condit.collectCondit)
    				}
    			})
    		}
    	},
    	// 获取列表数据内容
    	getContent(condit) {
    		api[condit.api](condit.param).then(data => {
    			if(this.collectData[this.index].router == '/loans/actual') {
    				this.collectData[this.index].list = [
    				{
    					name: '借款金额',
    					value: data.loanAmount,
    					diff: data.loanAmountDiff,
    				},{
    					name: '还款本金',
    					value: data.repayCapital,
    					diff: data.repayDiff,
    				},{
    					name: '借款在库',
    					value: data.loanStorage,
    					diff: data.loanStorageDiff,
    				},{
    					name: '90天回款率',
    					value: data.repay90Ratio,
    					diff: data.repay90RatioDiff,
    				}
    				]

    			}

    			this.$set(this.collectData[this.index], 'con', data)
    			this.index += 1
    			if(this.collectData[this.index]) {
    				this.getContent(this.collectData[this.index].condit.collectCondit)
    			} else {
    				if(this.count >3) {
    					this.loading = false
    				}
    			}

    		})
    	},
    	// 跳转到详细
    	detail (router, condit, conditName) {
    		this.$store.commit('detailCondit', {condit: condit, conditName: conditName})
    		this.$router.push({path: router})
    	},
    	// 取消收藏
    	cancelCollect (themeCode, router) {
    		api.cancelCollect({themeCode: themeCode, router: router}).then(data => {
    			this.collectData = this.collectData.filter(t => t.router != router)
    		})
    	}
    }
}
</script>
<style lang="less" scope>
@import '../../assets/less/base.less';
.collect-main {
	.title{
		padding-left: 0;
		margin: 0;
		font-weight: bold;

		.icon {
			color: #ff7327;
		}
	}
	.up-main {
		flex: 1;

		.up-item {
			border: none;
		}
	}
	.collect-item {
		padding: 0 .8rem;

		.up-main .up-item:before{
			display: none;
		}

		.up-item > p.sum{
			font-weight: normal;
			font-size: .7rem;
		}
		.up-item > p.up{
			font-weight: normal;
			font-size: .62rem;	
		}
	}

	.collect-title {
		line-height: 1.6rem;
		border-bottom: @border;

		.time {
			float: right;
		}
	}
	.collect-con {
		display: -webkit-flex; /* Safari */
		display: flex;
		padding:.6rem 0;
		text-align: center;
		line-height: 1.2rem;
		border-bottom: @border;

		.con-item {
			flex: 1;
		}
	}
	.collect-footer {
		line-height: 1.8rem;
	}
	.no-tip {
		position: fixed;
		font-size: .7rem;
		text-align: center;
		top: 13rem;
		width: 100%;
		color: #aaa;
	}
	.icon-icon_wushoucang {
		color: #ff7327;
		font-size: 5rem;
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		display: block;
		line-height: 13rem;
		text-align: center;
		opacity: .3
	}
}
</style>
